<template>
	<div class="data-style">
		<p class="title">组件样式</p>
		<el-form label-width="80px" :model="datas">
			<el-form-item class="lef" label="组件背景">
				<el-radio-group v-model="datas.background.type">
					<el-radio label="color">颜色</el-radio>
					<el-radio label="image">图片</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item class="lef" label="选择颜色" v-if="datas.background.type == 'color'">
				<el-color-picker v-model="datas.background.bgColor" /><el-input
					style="width: 140px"
					placeholder="颜色值"
					v-model="datas.background.bgColor"
				/>
			</el-form-item>

			<el-form-item class="lef" label="选择图片" v-else>
				<div class="image" @click="FileChoiceRef.openFileChoiceDialog()">
					<el-image v-if="datas.background.bgImage != ''" :src="STATIC_URL + datas.background.bgImage" fit="contain" />
					<el-icon v-else>
						<ele-Plus />
					</el-icon>
				</div>
			</el-form-item>

			<el-form-item label="上间距" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.marginTop"> </el-slider>
			</el-form-item>

			<el-form-item label="右间距" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.marginRight"> </el-slider>
			</el-form-item>

			<el-form-item label="下间距" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.marginBottom"> </el-slider>
			</el-form-item>

			<el-form-item label="左间距" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.marginLeft"> </el-slider>
			</el-form-item>

			<el-form-item label="上圆角" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.borderRadiusTop"> </el-slider>
			</el-form-item>

			<el-form-item label="下圆角" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.borderRadiusBottom"> </el-slider>
			</el-form-item>

			<el-form-item label="内间距" class="lef-height">
				<el-slider :max="100" :min="0" input-size="small" show-input v-model="datas.padding"> </el-slider>
			</el-form-item>
		</el-form>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="DataStyle">
import { ref, defineAsyncComponent, onMounted } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const props = defineProps({
	datas: {},
});

let choiceFile = (res) => {
	props.datas.background.bgImage = res.visitRelativePath;
};

onMounted(() => {
	console.log('props: ', JSON.stringify(props.datas));
});
</script>

<style scoped>
.data-style {
	.title {
		margin-top: 10px;
		height: 40px;
		width: 100%;
		background-color: #dfe6e9;
		line-height: 40px;
		padding-left: 20px;
	}
}

.image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	cursor: pointer;
	border: 1px dashed var(--el-border-color-darker);
	&:hover {
		border: 1px dashed var(--el-color-primary);
	}
}
</style>
